<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>建设端页面向导</title>
  <meta name="description" content="建设端页面向导">
  <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
      min-width: 1280px;
      min-height: 500px;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      width: 100%;
      height: 100%;
    }
    .swiper-slide1{background: url("img/1.png") no-repeat center/cover;}
    .swiper-slide2{background: url("img/2.png") no-repeat center/cover;}
    .swiper-slide3{background: url("img/3.jpg") no-repeat center/cover;}
    .swiper-slide4{background: url("img/4.jpg") no-repeat center/cover;}
    .swiper-slide5{background: url("img/5.jpg") no-repeat center/cover;}
    .swiper-slide6{background: url("img/6.jpg") no-repeat center/cover;}
    .swiper-slide7{background: url("img/7.png") no-repeat center/cover;}
    .btn1{
      width: 373px;
      height: 77px;
      display: inline-block;
      background: url("img/1b.png") no-repeat center/cover;
      cursor: pointer;
      position: absolute;
      left: 50%;
      margin-left: -186px;
      bottom: 10%;
      z-index: 999;
      transform: scale(0.8);
    }
    .btn2{
      background: url("img/7b.png") no-repeat center/cover;
      bottom: 8%;
      margin-left: 4px;
    }
    .swiper-button-prev{
      visibility: hidden;
      left: 2%;
      width: 44px;
      height: 44px;
      background: url(img/arrows.png) no-repeat left bottom;
      outline: none;
    }
    .swiper-button-next{
      visibility: hidden;
      right: 2%;
      width: 44px;
      height: 44px;
      background: url(img/arrows.png) no-repeat right bottom;
      outline: none;
    }
    .swiper-button-next.r{
      animation: toRight 1s;
      animation-iteration-count:2;
      -webkit-animation-iteration-count:2;
      animation-timing-function:ease-in-out;
      -webkit-animation-timing-function:ease-in-out;
    }
    .swiper-button-prev:after{
      display: none;
    }
    .swiper-button-next:after{
      display: none;
    }
    .swiper-button-next.swiper-button-disabled,
    .swiper-button-prev.swiper-button-disabled{
      visibility: hidden!important;
    }
    @keyframes toRight {
      0%{
        transform: translateX(0);
      }
      100%{
        transform: translateX(20px);
      }
    }
    .jump{
      position: fixed;
      top: 50px;
      right: 50px;
      border: dashed 3px #fff;
      padding: 6px 20px 8px;
      font-size: 16px;
      color: white;
      z-index: 999;
      cursor: pointer;
      letter-spacing: 5px;
      box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, .2);
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
      -webkit-transition: all .5s ease;
      transition: all .5s ease;
    }
    .jump:hover {
      box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, .3);
    }
    .a,.b{
      bottom: 8%;
      position: absolute;
      left: 50%;
      width: 216px;
      z-index: 99;
      cursor: pointer;
      height: 77px;
      outline: none;
      visibility: hidden;
      /*border: 2px solid white;*/
      border-radius: 39px;
      user-select: none;
      text-align: center;
      line-height: 77px;
      color: white;
      font-size: 28px;
      transform: scale(0.8);
    }
    .a{
      margin-left: -220px;
      background: url(img/a.png) no-repeat;
    }
    .b{
      margin-left: 4px;
      background: url(img/b.png) no-repeat;
    }
    .b.swiper-button-disabled{
      display: none;
    }
    .swiper-pagination-bullet {
      opacity: .1;
    }
    .swiper-pagination-bullet-active {
      opacity: 1;
    }
    .swiper-container-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-custom, .swiper-pagination-fraction {
      bottom: 3%;
    }
  </style>
</head>
<body>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide swiper-slide1 swiper-no-swiping">
      <span class="btn1" id="btn1"></span>
    </div>

    <div class="swiper-slide swiper-slide2">
    </div>

    <div class="swiper-slide swiper-slide3">
    </div>

    <div class="swiper-slide swiper-slide4">
    </div>

    <div class="swiper-slide swiper-slide5">
    </div>

    <div class="swiper-slide swiper-slide6">
    </div>

    <div class="swiper-slide swiper-slide7">
      <span class="btn1 btn2"></span>
    </div>
  </div>
  <div class="swiper-pagination"></div>

  <div class="a"></div>
  <div class="b"></div>
</div>
<div class="jump">跳过</div>
<script src="swiper/swiper-bundle.min.js"></script>
<script>
  var btn1 = document.querySelector('#btn1');
  var next = document.querySelector('.b');
  var prev = document.querySelector('.a');
  var swiper = new Swiper('.swiper-container',{
    navigation: {
      nextEl: '.b',
      prevEl: '.a',
    },
    pagination: {
      el: '.swiper-pagination',
    },
    on:{
      slideChangeTransitionStart: function(){
        if(this.activeIndex === 0) {
          next.style.visibility = 'hidden';
          prev.style.visibility = 'hidden'
        }
      }
    }
  });
  btn1.onclick = function(){
    swiper.slideNext();
    next.style.visibility = 'visible';
    prev.style.visibility = 'visible'
  };
</script>
</body>
</html>
